/* 实现功能：
    将素材目录下的index.html页面，拆分为三个文件，分别是：
      index.css
      index.js
      index.html
    并且将拆分出来的3个文件，存放到clock目录中
*/

/**
 * 实现步骤：
 *  1.创建两个正则表达式，分别用来匹配<style>和<script>标签
 *  2.使用fs模块，读取需要被处理的HTML文件
 *  3.自定义resolveCSS方法，来写入index.css样式文件
 *  4.自定义resolveJS方法，来写入index.js脚本文件
 *  5.自定义resolveHTML方法，来写入index.html文件
 */

// 1.1 导入fs模块
const fs = require('fs');
// 1.2 导入path模块
const path = require('path');

// 1.3创建正则表达式，用于匹配style和script标签
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script[^>]*?>[\s\S]*<\/script>/

// 2.1 调用fs.readFile()方法 读取文件
fs.readFile(path.join(__dirname, './素材/index.html'), 'utf8', (err, res) => {
  // 2.2 读取HTML文件失败
  if (err) return console.log('读取HTML文件失败', err.message);
  // 2.3 读取文件成功后，调用对应的三个方法，分别拆解出css，js，html文件
  resolveCSS(res)
  resolveJS(res)
  resolveHTML(res)

})

// 3.1 处理css样式
function resolveCSS(htmlStr) {
  // 3.2 使用正则提取需要的内容
  const r1 = regStyle.exec(htmlStr)
  // console.log('r1', r1);
  // 3.3 将提取出来的字符串，进行字符串的replace替换
  const newCSS = r1[0].replace('<style>', '').replace('</style>', '')
  // console.log(newCSS);
  // 3.4 调用fs.writeFile()方法，将提取到的样式，写入到 clock目录中的index.css文件里边
  fs.writeFile(path.join(__dirname, '/clock/index.css'), newCSS, (err) => {
    if (err) return console.log('写入css样式失败', err.message);
    console.log('写入样式文件成功！');
  })
}

// 4.1 处理js脚本文件
function resolveJS(htmlStr) {
  // 4.2 使用正则提取需要的内容
  const r2 = regScript.exec(htmlStr);
  // console.log('r2', r2);
  // 4.3 将提取出来的内容，做进一步处理
  const newJS = r2[0].replace('<script type="text/javascript">', '').replace('</script>', '')
  // 4.4 调用fs.writeFile()方法，将提取到的js脚本，写入到clock目录中的index.js文件中
  fs.writeFile(path.join(__dirname, './clock/index.js'), newJS, (err) => {
    if (err) return console.log('写入js文件失败', err.message);
    console.log('写入js脚本成功！');
  })

}

// 5.1 处理HTML结构
function resolveHTML(htmlStr) {
  // 5.2 将字符串调用replace方法，把内嵌的style和script标签，替换为外联的link和script标签
  const newHTML = htmlStr.replace(regStyle, '<link rel="stylesheet" href="./index.css" />').replace(regScript, '<script src="./index.js"></script>')
  // 5.3 写入index.html文件
  fs.writeFile(path.join(__dirname, './clock/index.html'), newHTML, (err) => {
    if (err) console.log('写入HTML文件失败了！', err.message);
    console.log('写入HTML文件成功！');
  })
  
}